<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Documents</h3>
</div>
<div class="p-h-md bg-light b-b">
  <ul class="nav nav-lines b-info" ui-nav>
    <li class="active"><a ui-scroll="build">Build</a></li>
    <li><a ui-scroll="css">CSS</a></li>
    <li><a ui-scroll="modules">Modules</a></li>
  </ul>
</div>
<div class="p-md">
  <h3 class="m-b-lg">Build </h3>
  <ol>
    <li>Install <a href="http://nodejs.org" class="font-bold">Node.js</a> and <a href="https://www.npmjs.org/" class="font-bold">NPM</a> on your computer</li>
    <li>Run command <code>npm install -g bower grunt-cli</code></li>
    <li>Run <code>bower install</code> to install dependencies</li>
    <li>Run <code>grunt build:dev</code> to build project</li>
    <li>Run <code>npm start</code> to start server</li>
  </ol>

  <p class="alert alert-info p-sm m-t-lg">
    Note: any commands we tell you to run must be ran from the project's root folder.
  </p>
  
  <div id="css" class="p-md"></div>
  <h3>CSS </h3>

  <p>Generated by LESS files. There are many Variables you can config.</p>

  <table class="table table-border bg-white b-a">
    <tbody>
      <tr class="bg-light lt">
        <td colspan="2">Margin and Padding</td>
      </tr>
      <tr><td>.no-margin</td><td>{margin: 0}</td></tr>
      <tr><td>.m     </td><td>{margin:       15px}</td></tr>
      <tr><td>.m-xs  </td><td>{margin:       5px}</td></tr>
      <tr><td>.m-sm  </td><td>{margin:       10px}</td></tr>
      <tr><td>.m-md  </td><td>{margin:       20px}</td></tr>
      <tr><td>.m-lg  </td><td>{margin:       30px}</td></tr>

      <tr><td>.m-v-xs</td><td>{margin-top: 5px; margin-bottom: 5px;}</td></tr>
      <tr><td>.m-v-sm</td><td>{margin-top: 10px;margin-bottom: 10px;}</td></tr>
      <tr><td>.m-v   </td><td>{margin-top: 15px;margin-bottom: 15px;}</td></tr>
      <tr><td>.m-v-md</td><td>{margin-top: 20px;margin-bottom: 20px;}</td></tr>
      <tr><td>.m-v-lg</td><td>{margin-top: 30px;margin-bottom: 30px;}</td></tr>

      <tr><td>.m-h-xs</td><td>{margin-left:5px; margin-right: 5px;}</td></tr>
      <tr><td>.m-h-sm</td><td>{margin-left:10px;margin-right: 10px;}</td></tr>
      <tr><td>.m-h   </td><td>{margin-left:15px;margin-right: 15px;}</td></tr>
      <tr><td>.m-h-md</td><td>{margin-left:20px;margin-right: 20px;}</td></tr>
      <tr><td>.m-h-lg</td><td>{margin-left:30px;margin-right: 30px;}</td></tr>

      <tr><td>.m-t   </td><td>{margin-top:   15px;}</td></tr>
      <tr><td>.m-t-xs</td><td>{margin-top:   5px;}</td></tr>
      <tr><td>.m-t-sm</td><td>{margin-top:   10px;}</td></tr>
      <tr><td>.m-t-md</td><td>{margin-top:   20px;}</td></tr>
      <tr><td>.m-t-lg</td><td>{margin-top:   30px;}</td></tr>

      <tr><td>.m-r   </td><td>{margin-right: 15px;}</td></tr>
      <tr><td>.m-r-xs</td><td>{margin-right: 5px;}</td></tr>
      <tr><td>.m-r-sm</td><td>{margin-right: 10px;}</td></tr>
      <tr><td>.m-r-md</td><td>{margin-right: 20px;}</td></tr>
      <tr><td>.m-r-lg</td><td>{margin-right: 30px;}</td></tr>

      <tr><td>.m-b   </td><td>{margin-bottom:15px;}</td></tr>
      <tr><td>.m-b-xs</td><td>{margin-bottom:5px;}</td></tr>
      <tr><td>.m-b-sm</td><td>{margin-bottom:10px;}</td></tr>
      <tr><td>.m-b-md</td><td>{margin-bottom:20px;}</td></tr>
      <tr><td>.m-b-lg</td><td>{margin-bottom:30px;}</td></tr>

      <tr><td>.m-l   </td><td>{margin-left:  15px;}</td></tr>
      <tr><td>.m-l-xs</td><td>{margin-left:  5px;}</td></tr>
      <tr><td>.m-l-sm</td><td>{margin-left:  10px;}</td></tr>
      <tr><td>.m-l-md</td><td>{margin-left:  20px;}</td></tr>
      <tr><td>.m-l-lg</td><td>{margin-left:  30px;}</td></tr>

      <tr><td>.m-n  </td><td>{margin:       -15px}</td></tr>
      <tr><td>.m-h-n</td><td>{margin-left:  -15px;margin-right: -15px;}</td></tr>
      <tr><td>.m-v-n</td><td>{margin-top:   -15px;margin-bottom:-15px;}</td></tr>
      <tr><td>.m-l-n</td><td>{margin-left:  -15px;}</td></tr>
      <tr><td>.m-r-n</td><td>{margin-right: -15px;}</td></tr>
      <tr><td>.m-t-n</td><td>{margin-top:   -15px;}</td></tr>
      <tr><td>.m-b-n</td><td>{margin-bottom:-15px;}</td></tr>
      <tr><td>.no-padding</td><td>{
        padding: 0 !important;
      }</td></tr>
      <tr><td>.no-padding-h</td><td>{
        padding-left: 0 !important; 
        padding-right: 0 !important;
      }</td></tr>
      <tr><td>.no-padding-v</td><td>{
        padding-top: 0 !important; 
        padding-bottom: 0 !important;
      }</td></tr>
      <tr><td>.p-xs</td><td>{
        padding: 5px;
      }</td></tr>
      <tr><td>.p-sm</td><td>{
        padding: 10px;
      }</td></tr>
      <tr><td>.p</td><td>{
        padding: 15px;
      }</td></tr>
      <tr><td>.p-md</td><td>{
        padding: 20px;
      }</td></tr>
      <tr><td>.p-lg</td><td>{
        padding: 30px;
      }</td></tr>
      <tr><td>.p-h</td><td>{
        padding-left: 15px;
        padding-right: 15px;
      }</td></tr>
      <tr><td>.p-h-xs</td><td>{
        padding-left: 5px; 
        padding-right: 5px;
      }</td></tr>
      <tr><td>.p-h-sm</td><td>{
        padding-left: 10px;
        padding-right: 10px;
      }</td></tr>
      <tr><td>.p-h-md</td><td>{
        padding-left: 20px;
        padding-right: 20px;
      }</td></tr>
      <tr><td>.p-h-lg</td><td>{
        padding-left: 30px;
        padding-right: 30px;
      }</td></tr>
      <tr><td>.p-v</td><td>{
        padding-top: 15px;
        padding-bottom: 15px;
      }</td></tr>
      <tr><td>.p-v-xs</td><td>{
        padding-top: 5px; 
        padding-bottom: 5px;
      }</td></tr>
      <tr><td>.p-v-sm</td><td>{
        padding-top: 10px;
        padding-bottom: 10px;
      }</td></tr>
      <tr><td>.p-v-md</td><td>{
        padding-top: 20px;
        padding-bottom: 20px;
      }</td></tr>
      <tr><td>.p-v-lg</td><td>{
        padding-top: 30px;
        padding-bottom: 30px;
      }</td></tr>
      <tr class="bg-light lt">
        <td colspan="2">Border</td>
      </tr>
      <tr>
        <td>.b-a</td>
        <td>border:1px solid @border-color(see app.variables.less)</td>
      </tr>
      <tr>
        <td>.b-l</td>
        <td>border left</td>
      </tr>
      <tr>
        <td>.b-t</td>
        <td>border top</td>
      </tr>
      <tr>
        <td>.b-r</td>
        <td>border right</td>
      </tr>
      <tr>
        <td>.b-b</td>
        <td>border bottom</td>
      </tr>
      <tr>
        <td>.b-light, .b-dark, .b-primary, .b-success, .b-info, .b-warning, .b-danger, .b-black, .b-white</td>
        <td>border with specific color.</td>
      </tr>
      <tr>
        <td>.b-2x</td>
        <td>border width with 2px</td>
      </tr>
      <tr>
        <td>.b-3x</td>
        <td>border width with 3px</td>
      </tr>
      <tr>
        <td>.no-border</td>
        <td>border width: 0</td>
      </tr>
      <tr>
        <td>.no-border-xs</td>
        <td>border width: 0 on etremely small screen.</td>
      </tr>
      <tr class="bg-light lt">
        <td colspan="2">Radius</td>
      </tr>
      <tr>
        <td>.r</td>
        <td>border-radius: @border-radius-base</td>
      </tr>
      <tr>
        <td>.r-l</td>
        <td>border-radius: @border-radius-base 0 0 @border-radius-base</td>
      </tr>
      <tr>
        <td>.r-r</td>
        <td>border-radius: 0 @border-radius-base @border-radius-base 0</td>
      </tr>
      <tr>
        <td>.r-t</td>
        <td>border-radius: @border-radius-base @border-radius-base 0 0</td>
      </tr>
      <tr>
        <td>.r-b</td>
        <td>border-radius: 0 0 @border-radius-base @border-radius-base</td>
      </tr>
      <tr>
        <td>.r-2x</td>
        <td>radius size: 2 x @border-radius-base</td>
      </tr>
      <tr>
        <td>.r-3x</td>
        <td>radius size: 3 x @border-radius-base</td>
      </tr>
      <tr class="bg-light lt">
        <td colspan="2">Text</td>
      </tr>
      <tr>
        <td>.text-u-c</td>
        <td>text uppercase</td>
      </tr>
      <tr>
        <td>.text-l-t</td>
        <td>text line through</td>
      </tr>
      <tr>
        <td>.text-u-l</td>
        <td>text under line</td>
      </tr>
      <tr>
        <td>.text-ellipsis</td>
        <td>display text in one line with ellipsis</td>
      </tr>
      <tr>
        <td>.text-center-xs</td>
        <td>center text only on extremely small devices</td>
      </tr>
      <tr>
        <td>.text-left-xs</td>
        <td>align text left only on extremely small devices</td>
      </tr>
      <tr>
        <td>.text-right-xs</td>
        <td>align text right only on extremely small devices</td>
      </tr>
      <tr class="bg-light lt">
        <td colspan="2">Width and Height</td>
      </tr>
      <tr>
        <td>.w-xxl</td>
        <td>width: 360px</td>
      </tr>
      <tr>
        <td>.w-xl</td>
        <td>width: 320px</td>
      </tr>
      <tr>
        <td>.w-lg</td>
        <td>width: 280px</td>
      </tr>
      <tr>
        <td>.w-md</td>
        <td>width: 240px</td>
      </tr>
      <tr>
        <td>.w</td>
        <td>width: 200px</td>
      </tr>
      <tr>
        <td>.w-sm</td>
        <td>width: 158px</td>
      </tr>
      <tr>
        <td>.w-xs</td>
        <td>width: 90px</td>
      </tr>
      <tr>
        <td>.w-xxs</td>
        <td>width: 60px</td>
      </tr>
      <tr>
        <td>.w-thumb-md</td>
        <td>width: 45px</td>
      </tr>
      <tr>
        <td>.w-thumb</td>
        <td>width: 34px</td>
      </tr>
      <tr>
        <td>.w-thumb-sm</td>
        <td>width: 30px</td>
      </tr>
      <tr>
        <td>.w-thumb-xs</td>
        <td>width: 20px</td>
      </tr>
      <tr>
        <td>.w-full</td>
        <td>width: 100%</td>
      </tr>
      <tr>
        <td>.w-auto-xs</td>
        <td>width: auto on extremely small screen.</td>
      </tr>
      <tr>
        <td>.h-full</td>
        <td>height: 100%</td>
      </tr>
      <tr class="bg-light lt">
        <td colspan="2">Arrow</td>
      </tr>
      <tr>
        <td>.arrow</td>
        <td>base class</td>
      </tr>
      <tr>
        <td>.left</td>
        <td>left arrow, position:middle</td>
      </tr>
      <tr>
        <td>.right</td>
        <td>right arrow, position:middle</td>
      </tr>
      <tr>
        <td>.top</td>
        <td>top arrow, position:center</td>
      </tr>
      <tr>
        <td>.bottom</td>
        <td>bottom arrow, position:center</td>
      </tr>
      <tr>
        <td>.pull-left</td>
        <td>.top and .bottom arrow with left position</td>
      </tr>
      <tr>
        <td>.pull-right</td>
        <td>.top and .bottom arrow with right position</td>
      </tr>
      <tr>
        <td>.pull-top</td>
        <td>.left and .right arrow with top position</td>
      </tr>
      <tr>
        <td>.pull-bottom</td>
        <td>.left and .right arrow with bottom position</td>
      </tr>
      <tr class="bg-light lt">
        <td colspan="2">Item</td>
      </tr>
      <tr>
        <td>.item-overlay</td>
        <td>overlay the element on an item, default display:none, with '.active' class will show</td>
      </tr>
      <tr>
        <td>.top</td>
        <td>top element on a item element</td>
      </tr>
      <tr>
        <td>.bottom</td>
        <td>bottom element on a item element</td>
      </tr>
      <tr>
        <td>.center</td>
        <td>center element on a item element</td>
      </tr>
      <tr class="bg-light lt">
        <td colspan="2">Button</td>
      </tr>
      <tr>
        <td class="w">.btn-rounded</td>
        <td>rounded button</td>
      </tr>
      <tr>
        <td>.btn-icon</td>
        <td>icon only button</td>
      </tr>
      <tr>
        <td>.btn-addon</td>
        <td>icon addon, must have a i tag, and can use .pull-left and .pull-right</td>
      </tr>      
      <tr class="bg-light lt">
        <td colspan="2">box</td>
      </tr>
      <tr>
        <td>.box</td>
        <td>display: table</td>
      </tr>
      <tr>
        <td>.box-row</td>
        <td>display: table-row</td>
      </tr>
      <tr>
        <td>.box-col</td>
        <td>display: table-cell</td>
      </tr>
      <tr>
        <td>.box-inner</td>
        <td>for box with fluid height</td>
      </tr>
      <tr>
        <td>.v-m</td>
        <td>vertical align: middle</td>
      </tr>
      <tr>
        <td>.v-t</td>
        <td>vertical align: top</td>
      </tr>
      <tr>
        <td>.v-b</td>
        <td>vertical align: bottom</td>
      </tr>
    </tbody>
  </table>

  <div id="modules" class="p-md"></div>
  <h3>Modules</h3>
  <p>Managed by Grunt</p>       
  
  <h4 class="m-t-md"><a href="https://github.com/angular-ui/ui-router">angular-ui-router</a></h4>
  <p>The de-facto solution to flexible routing with nested views</p>

  <h4 class="m-t-md"><a href="http://angular-translate.github.io/">angular-translate</a></h4>
  <p>i18n for your Angular apps, made easy</p>

  <h4 class="m-t-md"><a href="https://github.com/gsklee/ngStorage">ngStorage</a></h4>
  <p>localStorage and sessionStorage done right for AngularJS.</p>

  <h4 class="m-t-md"><a href="https://github.com/ocombe/ocLazyLoad">ocLazyLoad</a></h4>
  <p>Load modules on demand (lazy load) in AngularJS.</p>

  <h4 class="m-t-md"><a href="http://angular-ui.github.io/ui-utils/">UI.Utils</a></h4>
  <p>Swiss-Army-Knife of AngularJS tools (with no external dependencies!).</p>

  <h4 class="m-t-md"><a href="https://github.com/chieffancypants/angular-loading-bar">angular-loading-bar</a></h4>
  <p>A fully automatic loading / progress bar for your angular apps.</p>

  <h4 class="m-t-md"><a href="http://mgcrea.github.io/angular-strap/">angular-strap</a></h4>
  <p>AngularJS 1.2+ native directives for Bootstrap 3.</p>

  <h4 class="m-t-md"><a href="https://github.com/angular-ui/ui-select">angular-ui-select</a></h4>
  <p>AngularJS-native version of Select2 and Selectize</p>

  <h4 class="m-t-md"><a href="https://github.com/fraywing/textAngular">textAngular</a></h4>
  <p>A radically powerful Text-Editor/Wysiwyg editor for Angular.js! Create multiple editor instances, two-way-bind HTML content, watch editors for changes and more!</p>

  <h4 class="m-t-md"><a href="https://github.com/Venturocket/angular-slider">venturocket-angular-slider</a></h4>
  <p>Slider directive for AngularJS.</p>

  <h4 class="m-t-md"><a href="https://github.com/nickperkinslondon/angular-bootstrap-nav-tree">angular-bootstrap-nav-tree</a></h4>
  <p>An AngularJS directive that creates a Tree based on a Bootstrap "nav" list.</p>

  <h4 class="m-t-md"><a href="https://github.com/danialfarid/angular-file-upload">angular-file-upload</a></h4>
  <p>An AngularJS directive for file upload using HTML5 with FileAPI polyfill for unsupported browsers</p>

  <h4 class="m-t-md"><a href="https://github.com/alexk111/ngImgCrop">ngImgCrop</a></h4>
  <p>Image Crop directive for AngularJS</p>

  <h4 class="m-t-md"><a href="https://github.com/lorenzofox3/Smart-Table">angular-smart-table</a></h4>
  <p>Code source of Smart Table module: a table/grid for Angularjs</p>

  <h4 class="m-t-md"><a href="https://github.com/angular-ui/ui-map">angular-ui-map</a></h4>
  <p>Google Maps</p>

</div>